<template>
  <div class="tab-control">
    <div class="tab-control-item"
         :class='{active: index===collerIndex}'
         v-for="(item,index) in titles" :key="index"
         @click="itemlick(index)">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabControl",
  props: {
    titles: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      //  使用一个变量,  来记录当前谁是处于活跃的子组件
      collerIndex: 0,

    }
  },
  methods: {
    itemlick(index) {
      this.collerIndex = index;
    //  内部点击事件 , 把点击的数据  ,传到父组件 ,父组件通过接受到数据
      //进行判断 , 用于显示什么样的商品
      this.$emit('tabClick',index);
    }

  }
}
</script>

<style scoped>
/*<!--指定样式 , 一行展示-->*/
.tab-control {
  display: flex;
  /*指定文字居中*/
  text-align: center;
  /*指定文字的大小*/
  font-size: 15px;
  /*指定高度*/
  height: 40px;
  /*指定文字 ， 以父容器的高度 ， 进行上下居中*/
  line-height: 40px;
  background-color: #fff;
}

/*平均分*/
.tab-control-item {
  flex: 1;

}

/*指定文字点击后的颜色*/
.active {
  /* 指定文字的颜色*/
  color: var(--color-high-text);
}

.active span {
  /*指定的文字的下划线*/
  border-bottom: 3px solid var(--color-tint);
}

.tab-control-item span {
  padding: 5px;
}


</style>
